<div #mapViewNode class="esri-view">
  <div class="legend-box">
    <div class="legend-control">
      <i class="ag_remove" title="收起" *ngIf="legendShow" (click)="legendShow = !legendShow"></i>
      <i class="ag_web_asset" title="展开" *ngIf="!legendShow" (click)="legendShow = !legendShow"></i>
    </div>
    <form nz-form class="ant-advanced-search-form" *ngIf="legendShow">
      <div nz-row [nzGutter]="24">
        <div nz-col nzXl="24" nzXXl="24">
          <nz-form-item nzFlex>
            <nz-form-label>{{l('state')}}</nz-form-label>
            <nz-form-control>
              <nz-radio-group [(ngModel)]="lockState" (ngModelChange)="changeState()" [ngModelOptions]="{standalone: true}">
                <label nz-radio [nzValue]="''">{{l('all')}}{{l('lockset')}}</label>
                <label nz-radio [nzValue]="o.itemKey" *ngFor="let o of states">{{o.itemValue}}</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzXl="24" nzXXl="24">
          <nz-form-item nzFlex>
            <nz-form-label>{{l('lockset')}}</nz-form-label>
            <nz-form-control>
              <nz-select style="width:350px" name="siteId" [(ngModel)]="lockNo" [ngModelOptions]="{standalone: true}"
                         [nzPlaceHolder]="l('please_select_site')">
                <nz-option [nzValue]="''" [nzLabel]="l('all')"></nz-option>
                <nz-option *ngFor="let option of tempLocks" [nzValue]="option.lockNo" [nzLabel]="option.lockNo"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzXl="24" nzXXl="24">
          <nz-form-item nzFlex>
            <nz-form-label>{{l('date_time')}}</nz-form-label>
            <nz-form-control>
              <nz-input-group>
                <nz-range-picker nzShowTime [(ngModel)]="dateRange" [ngModelOptions]="{standalone: true}"
                                 (ngModelChange)="onChange($event)"></nz-range-picker>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzXl="24" nzXXl="24" class="control-area">
          <nz-form-item nzFlex>
            <button nz-button [nzType]="'primary'" (click)="getRouteByParams()">{{l('search')}}</button>
            <button nz-button (click)="reset()">{{l('reset')}}</button>
          </nz-form-item>
        </div>
      </div>
    </form>
  </div>

</div>
